<template>
  <div class="" style="padding: 1rem">
    <div style="display: flex">
      <div style="display: flex; align-items: center">
        <a-image width="40" src="/logo.png" />
        <h3 style="margin-left: 10px">查询会议</h3>
      </div>
      <div style="margin-left: auto">
        <a-button type="primary" @click="exportTableChange">导出全部</a-button>
      </div>
    </div>
    <div style="display: flex; margin-top: 10px">
      <div
        style="height: 80vh; width: 90vw; overflow-x: auto; overflow-y: auto"
      >
        <div>
          <a-tabs v-model="type" default-active-key="" @change="tabsChange">
            <template #extra>
              <div style="margin-left: auto; display: flex; align-items: center; gap: 8px">
                <a-button @click="refreshTable">
                  <template #icon><icon-refresh /></template>
                  <template #default>刷新</template>
                </a-button>
                <a-input-search placeholder="请输入" @search="getMeeting" />
              </div>
            </template>
            <a-tab-pane key="" title="全部"> </a-tab-pane>
            <a-tab-pane key="today" title="今天"> </a-tab-pane>
            <a-tab-pane key="thisweek" title="本周">
              <template #title>本周</template>
            </a-tab-pane>
            <a-tab-pane key="thismonth" title="本月">
              <template #title>本月</template>
            </a-tab-pane>
            <a-tab-pane key="thisyear" title="本年">
              <template #title>本年</template>
            </a-tab-pane>
          </a-tabs>
        </div>

        <div style="">
          <div>
            <a-table
              :columns="columns"
              :data="data"
              :loading="refreshLoading"
              style="overflow-x: auto"
              :scroll="{ x: 2000 }"
              :pagination="false"
              :bordered="true"
              :stripe="true"
            >
              <!-- 会议名称列插槽 -->
              <template #subject="{ record }">
                <a-tooltip :content="record.subject">
                  <a-link @click="showMeetDetail(record)">
                    {{ record.subject && record.subject.length > 12 ? `${record.subject.slice(0, 12)}...` : record.subject }}
                  </a-link>
                </a-tooltip>
              </template>
              <!-- 状态列插槽 -->
              <template #conferenceState="{ record }">
                <a-tag :color="getStatusColor(record.conferenceState)">
                  {{ getStatusText(record.conferenceState) }}
                </a-tag>
              </template>
              <!-- 会议地点列插槽 -->
              <template #location="{ record }">
                <a-tooltip :content="record.location">
                  <span style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: inline-block; max-width: 100%;">
                    {{ record.location }}
                  </span>
                </a-tooltip>
              </template>
              <!-- 部门列插槽，全部展示内容，无省略号和tooltip -->
      <template #deptName="{ record }">
                <span
                  style="white-space: nowrap; overflow: visible; text-overflow: initial; display: inline-block; max-width: 100%;"
          v-html="formatDeptName(record.deptName)"
                ></span>
      </template>
              <!-- 创建日期列插槽 -->
              <template #createTime="{ record }">
                <a-tooltip :content="record.createTime ? record.createTime.slice(0, 16) : ''">
                  <span style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: inline-block; max-width: 100%;">
                    {{ record.createTime ? record.createTime.slice(0, 16) : '' }}
                  </span>
                </a-tooltip>
              </template>
              <!-- 开始日期列插槽 -->
              <template #startTime="{ record }">
                <a-tooltip :content="record.startTime ? record.startTime.slice(0, 16) : ''">
                  <span style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: inline-block; max-width: 100%;">
                    {{ record.startTime ? record.startTime.slice(0, 16) : '' }}
                  </span>
                </a-tooltip>
              </template>
              <!-- 结束日期列插槽 -->
              <template #endTime="{ record }">
                <a-tooltip :content="record.endTime ? record.endTime.slice(0, 16) : ''">
                  <span style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: inline-block; max-width: 100%;">
                    {{ record.endTime ? record.endTime.slice(0, 16) : '' }}
                  </span>
                </a-tooltip>
              </template>
              <!-- 操作列插槽 -->
              <template #action="{ record }">
                <a-space>
                  <a-dropdown v-if="record.conferenceState === 0 && record.createUser === userStore.userInfo.userid || record.templateUrl">
                    <a-link style="padding: 0 8px;">更多 <IconDown /></a-link>
                    <template #content>
                      <a-doption v-if="record.conferenceState === 0 && record.createUser === userStore.userInfo.userid" @click="cancelMyMeeting(record.conferenceId)">
                        <IconClose style="color: #f53f3f; margin-right: 4px;" />取消会议
                      </a-doption>
                      <a-doption v-if="record.templateUrl" @click="downloadTemplateFile(record.templateUrl)">
                        <IconDownload style="color: #165dff; margin-right: 4px;" />下载会议服务文件
                      </a-doption>
                    </template>
                  </a-dropdown>
                </a-space>
              </template>
            </a-table>
          </div>
          <div
            style="margin-left: auto; display: flex; justify-content: flex-end"
          >
            <!-- 添加分页器 -->
            <a-pagination
              v-model:current="page.current"
              v-model:page-size="page.pageSize"
              :total="page.total"
              :show-total="page.showTotal"
              :show-jumper="page.showJumper"
              :page-size-options="[5, 10, 20, 50]"
              :show-page-size="true"
              style="margin-top: 16px"
              @change="handlePageChange"
              @page-size-change="handlePageSizeChange"
            />
          </div>
        </div>
      </div>
    </div>
    <div></div>

    <!-- 会议详情弹窗 -->
    <a-modal
      v-model:visible="detailVisible"
      :title="meetDetail?.subject"
      :width="800"
      :footer="false"
      unmount-on-close
      @cancel="detailVisible = false"
      @ok="detailVisible = false"
    >
      <div v-if="meetDetail" class="meet-detail">
        <div class="detail-item">
          <span class="label">会议号：</span>
          <span class="value">{{ meetDetail.conferenceId }}</span>
        </div>
        <div class="detail-item">
          <span class="label">会议主题：</span>
          <span class="value">{{ meetDetail.subject }}</span>
        </div>
        <div class="detail-item">
          <span class="label">会议室：</span>
          <span class="value">{{ meetDetail.meetingRoomName ? meetDetail.meetingRoomName.split(',').join('\n') : '线上会议' }}</span>
        </div>
        <div class="detail-item">
          <span class="label">会议时间：</span>
          <span class="value">{{ meetDetail.startTime.split(' ')[1] }} - {{ meetDetail.endTime.split(' ')[1] }}</span>
        </div>
        <div class="detail-item">
          <span class="label">会议状态：</span>
          <span class="value">
            <a-tag :color="getStatusColor(meetDetail.conferenceState)">
              {{ getStatusText(meetDetail.conferenceState) }}
            </a-tag>
          </span>
        </div>
        <div class="detail-item">
          <span class="label">会议类型：</span>
          <span class="value">
            {{ meetDetail.meetType === 0 ? '线下' : '线上' }}
            <a-tag v-if="meetDetail.circleType === 1" color="blue" class="ml-2">周期会议</a-tag>
          </span>
        </div>
        <div class="detail-item">
          <span class="label">会议配置：</span>
          <div class="value config-group">
            <div class="config-item">
              <a-tag :color="getCallInRestrictionColor(meetDetail.callInRestriction)">
                {{ getCallInRestrictionText(meetDetail.callInRestriction) }}
              </a-tag>
            </div>
            <div class="config-item">
              <a-tag :color="meetDetail.enableWaitingRoom ? 'blue' : 'gray'">
                {{ meetDetail.enableWaitingRoom ? '开启等候室' : '关闭等候室' }}
              </a-tag>
            </div>
            <div class="config-item">
              <a-tag :color="meetDetail.autoMute === 1 ? 'blue' : 'gray'">
                {{ meetDetail.autoMute === 1 ? '自动静音' : '不自动静音' }}
              </a-tag>
            </div>
            <div class="config-item">
              <a-tag :color="meetDetail.enableSignOut === '1' ? 'blue' : 'gray'">
                {{ meetDetail.enableSignOut === '1' ? '开启签到' : '关闭签到' }}
              </a-tag>
            </div>
            <div v-if="meetDetail.enableSignOut === '1' && meetDetail.signInBeforeMinutes" class="config-item">
              <a-tag color="blue">会前{{ meetDetail.signInBeforeMinutes }}分钟可签到</a-tag>
            </div>
            <div v-if="meetDetail.enableSignOut === '1' && meetDetail.signOutMinutesAfterSignIn" class="config-item">
              <a-tag color="blue">签到结束后{{ meetDetail.signOutMinutesAfterSignIn }}分钟可签退</a-tag>
            </div>
            <div v-if="meetDetail.enableSignOut === '1' && meetDetail.signOutAfterEndMinutes" class="config-item">
              <a-tag color="blue">会议结束后{{ meetDetail.signOutAfterEndMinutes }}分钟内可签退</a-tag>
            </div>
          </div>
        </div>
        <div v-if="meetDetail.circleType === 1" class="detail-item">
          <span class="label">周期信息：</span>
          <div class="value">
            <div v-for="(monthGroup, index) in meetDetail.subMeet" :key="index" class="sub-meet-group">
              <div class="month-title">{{ monthGroup.month }}</div>
              <div class="sub-meet-list">
                <div v-for="sub in monthGroup.sub" :key="sub.id" class="sub-meet-item">
                  <div class="sub-meet-time">{{ sub.startTime }} - {{ sub.endTime }}</div>
                  <div class="sub-meet-subject">{{ sub.subject }}</div>
                  <div class="sub-meet-creator">创建人：{{ sub.createUserName }}</div>
                  <!-- 当前用户是创建人时显示取消按钮 -->
                  <a-popconfirm
                    v-if="meetDetail.createUser === userStore.userInfo.userid"
                    content="确定要取消此子会议吗？"
                    @ok="cancelMySubMeeting(meetDetail.conferenceId, sub.cycleSubConfID)"
                  >
                    <a-button type="text" status="danger" size="small">取消子会议</a-button>
                  </a-popconfirm>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="detail-item">
          <span class="label">主持人密码：</span>
          <span class="value">{{ meetDetail.passwordChair }}</span>
        </div>
        <div class="detail-item">
          <span class="label">来宾密码：</span>
          <span class="value">{{ meetDetail.passwordGeneral || '无' }}</span>
        </div>
        <div class="detail-item">
          <span class="label">创建人：</span>
          <span class="value">{{ meetDetail.createUserName }}</span>
        </div>
        <div class="detail-item">
          <span class="label">参会人：</span>
          <div class="value">
            <div class="participants">
              <div v-for="participant in visibleParticipants" :key="participant.userid" class="participant-item">
                <a-avatar
                  :size="32"
                  :image-url="participant.avatar"
                  class="participant-avatar"
                >
                  {{ participant.realname?.charAt(0) }}
                </a-avatar>
                <span class="participant-name">{{ participant.realname }}</span>
              </div>
            </div>
            <div class="view-more-container">
              <a-button v-if="hasMoreParticipants" type="outline" size="small" class="view-more-btn" @click="allParticipantsVisible = true">
                <template #icon><icon-more /></template>
                查看全部
              </a-button>
            </div>
          </div>
        </div>
        <div class="detail-item">
          <span class="label">创建时间：</span>
          <span class="value">{{ meetDetail.createTime }}</span>
        </div>
        <div class="detail-item">
          <span class="label">更新时间：</span>
          <span class="value">{{ meetDetail.updateTime }}</span>
        </div>
      </div>
    </a-modal>

    <!-- 添加全部参会人弹窗 -->
    <a-modal
      v-model:visible="allParticipantsVisible"
      title="全部参会人员"
      :width="700"
      :footer="false"
      @cancel="allParticipantsVisible = false"
    >
      <div class="all-participants">
        <div v-for="participant in meetDetail?.participants" :key="participant.userid" class="participant-item">
          <a-avatar
            :size="36"
            :image-url="participant.avatar"
            class="participant-avatar"
          >
            {{ participant.realname?.charAt(0) }}
          </a-avatar>
          <span class="participant-name">{{ participant.realname }}</span>
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script setup lang="ts"
>
import { computed, onMounted, reactive, ref } from 'vue'
import * as XLSX from 'xlsx'
import { Message } from '@arco-design/web-vue'
import { IconClose, IconDown, IconDownload } from '@arco-design/web-vue/es/icon'
import { adminCancelMyMeeting, adminCancelMySubMeeting, getMeet, getUserList, userListFastExport } from '@/apis/meet/meet'
import { useUserStore } from '@/stores'

// 获取用户store
const userStore = useUserStore()
// arco.design分页器参数
const page = reactive({
  current: 1, // 当前页码
  pageSize: 10, // 每页数量
  total: 0, // 总数据量（从接口获取）
  showTotal: true, // 是否显示总数
  showJumper: true // 是否显示页码跳转
})
// 查询会议的类型
const type = ref<string | number | null>(null)
const _meetingName = ref() // 用于查询的会议名称变量
// 查询会议列表的参数
const query = ref<any>({
  timeRange: 'thisyear'
})
const exportData = ref<any>([]) // 导出数据数组
// 表头
const columns = [
  {
    title: '会议号',
    dataIndex: 'conferenceId',
    width: 200, // 固定宽度，确保不被遮挡
    cellClass: 'conference-id-cell'
  },
  {
    title: '会议主题',
    dataIndex: 'subject',
    slotName: 'subject',
    width: 160,
    ellipsis: true
  },
  {
    title: '会议地点',
    dataIndex: 'location',
    width: 300,
    ellipsis: true,
    slotName: 'location'
  },
  {
    title: '发起人',
    dataIndex: 'createUserName'
  },
  {
    title: '部门',
    dataIndex: 'deptName',
    slotName: 'deptName',
    width: 200
  },
  {
    title: '工号',
    dataIndex: 'workId'
  },
  {
    title: '创建日期',
    dataIndex: 'createTime',
    width: 200,
    ellipsis: true,
    slotName: 'createTime'
  },
  {
    title: '状态',
    dataIndex: 'conferenceState',
    slotName: 'conferenceState'
  },
  {
    title: '开始日期',
    dataIndex: 'startTime',
    width: 200,
    ellipsis: true,
    slotName: 'startTime'
  },
  {
    title: '结束日期',
    dataIndex: 'endTime',
    width: 200,
    ellipsis: true,
    slotName: 'endTime'
  },
  {
    title: '操作',
    slotName: 'action',
    width: 150,
    align: 'center' as const,
    fixed: 'right' as const
  }
]
const data = ref<any>([]) // 表格数据
const refreshLoading = ref(false) // 刷新加载状态
/**
 * 列表请求函数
 */
const fetchFc = async (meetingName?: string) => {
  const res = await getUserList({
    page: page.current,
    size: page.pageSize,
    timeRange: query.value.timeRange,
    query: meetingName
  })
  data.value = res.data.list
  page.total = res.data.total
}

/**
 * 搜索按钮点击事件
 */
const getMeeting = (value) => {
  fetchFc(value)
}

/**
 * 标签页切换事件
 */
const tabsChange = (key: string | number) => {
  type.value = key
  query.value.timeRange = type.value
  fetchFc()
}
/**
 * 导出全部数据
 */
const fetchFCAll = async () => {
  const res = await userListFastExport(query.value.timeRange)
  exportData.value = res.data

  if (!exportData.value?.length) {
    Message.warning('暂无数据可导出')
  } else {
    // 1. 定义中文字段映射关系
    const headerMap = {
      conferenceId: '会议号',
      meetingRoomName: '会议室名称',
      subject: '会议主题',
      startTime: '开始时间',
      endTime: '结束时间',
      conferenceState: '会议状态',
      createUserName: '创建人',
      workId: '工号',
      deptName: '部门名称',
      meetType: '会议类型',
      circleType: '是否周期会议',
      location: '会议地点',
      enableSignOut: '是否开启签到',
      signInBeforeMinutes: '会议开始前可签到(分钟)',
      signOutMinutesAfterSignIn: '签到后可签退(分钟)',
      signOutAfterEndMinutes: '会议结束后可签退(分钟)',
      createTime: '创建时间',
      participants: '参会人'
    }
    // 2. 构建带中文表头的数据
    const ChineseData = [
      Object.values(headerMap), // 中文表头
      ...exportData.value.map((item) => [
        item.conferenceId || '--',
        item.meetingRoomName || '--',
        item.subject || '--',
        item.startTime || '--',
        item.endTime || '--',
        item.conferenceState === 0 ? '预约' : item.conferenceState === 1 ? '进行中' : item.conferenceState === 3 ? '已结束' : '--',
        item.createUserName || '--',
        item.workId || '--',
        item.deptName || '--',
        item.meetType === 0 ? '线上' : item.meetType === 1 ? '线下' : '--',
        item.circleType === 1 ? '是' : '否',
        item.location || '--',
        item.enableSignOut === 1 || item.enableSignOut === '1' ? '开启' : '不开启',
        item.signInBeforeMinutes ?? '--',
        item.signOutMinutesAfterSignIn ?? '--',
        item.signOutAfterEndMinutes ?? '--',
        item.createTime || '--',
        item.participants || '--'
      ])
    ]
    // 3. 创建带中文表头的工作表
    const worksheet = XLSX.utils.aoa_to_sheet(ChineseData)
    const wb = XLSX.utils.book_new()
    XLSX.utils.book_append_sheet(wb, worksheet, '会议记录')
    XLSX.writeFile(wb, '会议表.xlsx')
  }
}
/**
 * 分页网络请求
 */
const handlePageChange = (newPage: number) => {
  page.current = newPage
  fetchFc()
}

/**
 * 导出按钮事件
 */
const exportTableChange = () => {
  fetchFCAll()
}

/**
 * 刷新表格数据
 */
const refreshTable = async () => {
  try {
    refreshLoading.value = true
    await fetchFc()
  } finally {
    refreshLoading.value = false
  }
}

/**
 * 切换显示条数事件
 */
const handlePageSizeChange = (newSize: number) => {
  page.pageSize = newSize
  page.current = 1 // 切换每页条数后重置到第一页
  fetchFc()
}

// 会议详情相关
const detailVisible = ref(false)
const meetDetail = ref<any>(null)
const allParticipantsVisible = ref(false) // 全部参会人弹窗显示状态

// 显示的参会人数限制
const PARTICIPANTS_LIMIT = 6

// 计算显示的参会人列表
const visibleParticipants = computed(() => {
  if (!meetDetail.value?.participants) return []
  return meetDetail.value.participants.slice(0, PARTICIPANTS_LIMIT)
})

// 检查是否需要显示"查看更多"按钮
const hasMoreParticipants = computed(() => {
  return meetDetail.value?.participants && meetDetail.value.participants.length > PARTICIPANTS_LIMIT
})

// 显示会议详情
const showMeetDetail = async (record: any) => {
  try {
    const res = await getMeet(record.conferenceId)
    if (Number(res.code) === 0) {
      // 使用类型断言处理
      const meetData = res.data as any
      // 确保participants字段存在
      if (!meetData.participants) {
        meetData.participants = []
      }
      meetDetail.value = meetData
      detailVisible.value = true
    } else {
      Message.error(res.msg || '获取会议详情失败')
    }
  } catch (error: any) {
    Message.error(error.message || '获取会议详情失败')
  }
}

// 获取会议状态文本
const getStatusText = (conferenceState: number) => {
  const statusMap: Record<number, string> = {
    0: '预约',
    1: '正在开始',
    2: '取消',
    3: '已结束'
  }
  return statusMap[conferenceState] || '未知状态'
}

// 获取会议状态颜色
const getStatusColor = (conferenceState: number) => {
  const statusMap: Record<number, string> = {
    0: 'orange', // 预约改为橙色
    1: 'green', // 正在开始保持绿色
    2: 'red', // 取消保持红色
    3: 'red' // 结束改为红色
  }
  return statusMap[conferenceState] || 'default'
}

// 获取入会范围文本
const getCallInRestrictionText = (callInRestriction: number) => {
  const restrictionMap: Record<number, string> = {
    0: '所有用户',
    2: '企业内用户',
    3: '被邀请用户'
  }
  return restrictionMap[callInRestriction] || '未知范围'
}

// 获取入会范围颜色
const getCallInRestrictionColor = (callInRestriction: number) => {
  const colorMap: Record<number, string> = {
    0: 'green',
    2: 'blue',
    3: 'orange'
  }
  return colorMap[callInRestriction] || 'gray'
}

// 格式化部门名称，添加wbr
const formatDeptName = (deptName: string) => {
  if (!deptName) return ''
  return deptName.replace(/-/g, '<wbr>-')
}

// 取消我的会议
const cancelMyMeeting = async (conferenceId: string) => {
  try {
    const res = await adminCancelMyMeeting(conferenceId)
    if (String(res.code) === '0') {
      Message.success('会议取消成功')
      fetchFc() // 刷新表格数据
    } else {
      Message.error(res.msg || '取消会议失败')
    }
  } catch (error: any) {
    console.error('取消会议错误:', error)
    Message.error(error.message || '取消会议失败')
  }
}

// 下载会议服务文件
const downloadTemplateFile = (url: string) => {
  if (!url) return
  const link = document.createElement('a')
  link.href = url
  link.download = ''
  document.body.appendChild(link)
  link.click()
  document.body.removeChild(link)
}

// 取消我的子会议
const cancelMySubMeeting = async (conferenceId: string, cycleSubConfID: string) => {
  try {
    const res = await adminCancelMySubMeeting({ conferenceId, cycleSubConfID })
    if (String(res.code) === '0') {
      Message.success('子会议取消成功')
      // 刷新会议详情
      if (meetDetail.value) {
        const detailRes = await getMeet(meetDetail.value.conferenceId)
        if (Number(detailRes.code) === 0) {
          const meetData = detailRes.data as any
          if (!meetData.participants) {
            meetData.participants = []
          }
          meetDetail.value = meetData
        }
      }
    } else {
      Message.error(res.msg || '取消子会议失败')
    }
  } catch (error: any) {
    console.error('取消子会议错误:', error)
    Message.error(error.message || '取消子会议失败')
  }
}

onMounted(() => {
  fetchFc()
})
</script>

<style lang="scss" scoped>
.meet-detail {
  padding: 16px;

  .detail-item {
    margin-bottom: 16px;
    display: flex;
    align-items: flex-start;

    .label {
      width: 100px;
      color: var(--color-text-2);
      font-weight: 500;
    }

    .value {
      flex: 1;
      color: var(--color-text-1);
      white-space: pre-line;

      .ml-2 {
        margin-left: 8px;
      }

      .config-item {
        display: inline-block;
        margin-right: 12px;
        margin-bottom: 8px;

        &:last-child {
          margin-right: 0;
        }
      }

      .sub-meet-group {
        margin-bottom: 16px;
        padding: 12px;
        background-color: var(--color-fill-2);
        border-radius: 4px;

        .month-title {
          font-size: 16px;
          font-weight: 500;
          color: var(--color-text-1);
          margin-bottom: 12px;
          padding-bottom: 8px;
          border-bottom: 1px solid var(--color-border);
        }

        .sub-meet-list {
          display: flex;
          flex-direction: column;
          gap: 12px;

          .sub-meet-item {
            padding: 12px;
            background-color: var(--color-bg-2);
            border-radius: 4px;
            transition: all 0.2s;

            &:hover {
              background-color: var(--color-fill-3);
              transform: translateY(-2px);
            }

            .sub-meet-time {
              font-size: 14px;
              color: var(--color-text-1);
              margin-bottom: 4px;
            }

            .sub-meet-subject {
              font-size: 14px;
              color: var(--color-text-1);
              margin-bottom: 4px;
            }

            .sub-meet-creator {
              font-size: 12px;
              color: var(--color-text-3);
            }
          }
        }
      }
    }

    .participants {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 16px 20px;
      margin-bottom: 12px;
      width: 100%;

      .participant-item {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px 12px;
        border-radius: 4px;
        background-color: var(--color-fill-2);
        transition: all 0.2s;

        &:hover {
          background-color: var(--color-fill-3);
          transform: translateY(-2px);
        }

        .participant-avatar {
          cursor: pointer;
          flex-shrink: 0;
        }

        .participant-name {
          font-size: 14px;
          color: var(--color-text-1);
          flex: 1;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }

    .view-more-container {
      display: flex;
      justify-content: flex-start;
      width: 100%;
      margin-top: 10px;
    }

    .view-more-btn {
      transition: all 0.2s;

      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
      }
    }
  }
}

.all-participants {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  max-height: 60vh;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 8px;
  width: 100%;
  box-sizing: border-box;

  .participant-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    border-radius: 4px;
    background-color: var(--color-fill-2);
    transition: all 0.2s;
    width: 100%;
    box-sizing: border-box;
    word-break: break-all;

    &:hover {
      background-color: var(--color-fill-3);
      transform: translateY(-2px);
    }

    .participant-avatar {
      cursor: pointer;
      flex-shrink: 0;
    }

    .participant-name {
      font-size: 14px;
      color: var(--color-text-1);
      flex: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}

.subject-wrapper {
  max-width: 100%;
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 表格所有单元格不换行 */
:deep(.arco-table-td) {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 详情弹窗内容不换行 */
.meet-detail .value {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

:deep(.meet-detail .value.config-group) {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: initial !important;
}
:deep(.meet-detail .config-item) {
  margin-bottom: 0 !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: initial !important;
}

:deep(.conference-id-cell) {
  white-space: nowrap !important;
  word-break: normal !important;
}
</style>
